<template>
    <div :id="props.id"
         :style="{width: props.width, height: props.height}"
    ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, onUnmounted, defineProps} from 'vue';

export interface BarInterface {
    title: string;
    xData: string[];
    yData: number[];
}

const props = defineProps({
    id: {
        type: String,
        default: 'line'
    },
    theme: {
        type: String,
        default: '' // dark
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    data: {
        type: Object,
        default: () => {
            return {
                title: '堆叠拆线图',
                xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                yData: [120, 200, 150, 80, 70, 110, 130]
            }
        }
    },
    option: {
        type: Object,
        default: () => {
            return {
                title:{
                  text: ''
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
        }
    }
});

onMounted(() => {
    init()
});

function init() {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    props.option.title.text = props.data.title;
    props.option.xAxis.data = props.data.xData;
    props.option.series[0].data = props.data.yData;
    basicBar.setOption(props.option);
}

function resize() {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    basicBar.resize();
}

onMounted(() => {
    window.addEventListener('resize', resize);
});

onUnmounted(() => {
    window.removeEventListener('resize', resize);
});

function refreshChart(data : BarInterface) {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    props.option.title.text = data.title;
    props.option.xAxis.data = data.xData;
    props.option.series[0].data = data.yData;
    basicBar.setOption(props.option);
}

defineExpose({
    refreshChart
});


</script>

<style scoped>

</style>